<template>
    <div>
    <h1>康复列表</h1>
        项目名称:
        <input type="text" v-model="datacount.name">
      
        <input type="button" value="查询" class="btn btn-success"  @click="Show">
        <br>
        <a href="/Addhop">新增康复信息</a><input type="button" value="批量操作" @click="Plupd()">
<table class="table">
    <thead>
    <tr>
        <td><input type="checkbox" v-model="seledata" @change="Quanx"></td>
        <td>项目名称</td>
        <td>编号</td>
        <td>服务时长</td>
        <td>服务人数</td>
        <td>佣金(元)</td>
        <td>状态</td>
        <td>项目说明</td>
        <td>操作</td>
    </tr>
    </thead>
  <tbody v-for="d in showdata">
     <tr>
        <td><input type="checkbox" v-model="idarray":value=d.id></td>
       <td>{{d.name  }}</td>
        <td>{{ d.code }}</td>
        <td>{{ d.num }}</td>
        <td>{{ d.number }}</td>
        <td>{{ d.money }}</td>
        <td>{{ d.state==true?"启用":"禁用" }}</td>
        <td>{{ d.hing }}</td>
        <td>
            <input type="button" value="删除" @click="Del(d.id)">
        </td>
    </tr>
  </tbody>

</table>
共{{dataget.count}}数，每页{{ datacount.size}}条，共{{datacount.index}}/{{dataget.pagelist}}页
<input type="button" value="首页" @click="fy(1)">
<input type="button" value="上一页" @click="fy(datacount.index-1)">
<input type="button" v-for="a in dataget.pagelist":value=a @click="fy(a)">
<input type="button" value="下一页" @click="fy(datacount.index+1)">
<input type="button" value="尾页" @click="fy(dataget.pagelist)">



    </div>
</template>

<script setup lang="ts">
import axios from 'axios'
import {ref,onMounted}from 'vue'
import { useRouter } from 'vue-router';

//跳转数组
const router=useRouter()

//全选数组
const seledata=ref(false);

const Quanx=()=>{
    idarray.value=[];
    if(seledata.value)
    {
        showdata.value.forEach((e)=>{
            idarray.value.push((e.id))
        })
    }
}


//批量数组
const idarray=ref({})


//批量修改状态
const Plupd=()=>{

    if(confirm("确认修改吗?"))
{
  axios.get("/api/Hption/PlUpd",{params:{idstring:idarray.value.toString()}}).then(res=>{
        if(res.data>0)
        {
         alert("修改成功")   
           Show()
        }
        else
        {
            alert("修改失败");
        }
    })
}
  
}

//翻页
const fy=(a:number)=>{
 if(a>=1&&a<=dataget.value.pagelist)
 {
    datacount.value.index=a;
    Show()
 }
}

//逻辑删除
const Del=(mid:number)=>{
    if(confirm("确认删除吗?"))
{
  axios.get("/api/Hption/DelHop",{params:{id:mid}}).then(res=>{
        if(res.data>0)
        {
         alert("逻辑删除成功")   
           Show()
        }
        else
        {
            alert("逻辑删除失败");
        }
    })
}
  
}


//显示的文档就绪
onMounted(()=>{
    Show()
})

//显示数据
const showdata=ref([{
      "id": 1,
      "name": "肌力增强训练",
      "code": "20250714794",
      "num": 2,
      "number": 3,
      "money": 900,
      "state": true,
      "hing": "锻炼身体的一种方式"
}])

const datacount=ref({
    name:"",
    index:1,
    size:3,
})
const dataget=ref({
    count:0,
    pagelist:0
})
//显示
const Show=()=>{
    axios.get("/api/Hption/ShowHop",{params:datacount.value}).then(res=>{
        showdata.value=res.data.page
        dataget.value.count=res.data.count
        dataget.value.pagelist=Math.ceil(dataget.value.count/datacount.value.size)
    })
}



</script>

<style scoped>

</style>